<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" />
    <link rel="stylesheet" href="../../css/common/default_style.css">
<!--    <link rel="stylesheet" href="../../css/common.css"/>-->
    <style>
        #main-div{
            position: absolute;
            top: 60px;
            bottom: 0px;
            box-sizing: border-box;
        }
        #tab-bar{
            border:1px solid;
            height: 40px;
            font-size: 22px;
            line-height: 40px;
            box-sizing: border-box;
            background-color: #ddd;
        }
        .tab{
            display: inline-block;
            padding-right: 10px;
            border-top: 1px solid;
            border-right: 1px solid;
            border-top-right-radius: 10px;
            background: linear-gradient(135deg, #eee 10px, transparent 0)   ;
        }
        .tab:hover{
            background-color: #eee;
        }
        .tab-this{
            background-color: #eee;
        }
        #main-iframe-div{
            width: 100%;
            height: 98%;
            box-sizing: border-box;
        }
        #main-iframe{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body onload="loadData()">
<div id="main-div">
    <div id="tab-bar">
        <div class="tab tab-this" id="friendTab" src="./friend-list.html" onclick="switchTab('#friendTab')">
            好友页面
        </div>
        <div class="tab" id="srchTab" src="./srch.html" onclick="switchTab('#srchTab')">
            搜索好友
        </div>
        <div class="tab" id="requestTab" src="request.html" onclick="switchTab('#requestTab')">
            好友申请
        </div>
    </div>
    <div class="view-item" id="friend-view">
<!--        好友列表/聊天界面-->
    </div>
    <div class="view-item" id="srch-view">
<!--        好友搜索-->
    </div>
    <div class="view-item" id="request-view">
<!--        好友申请-->
    </div>
    <div id="main-iframe-div">
        <iframe id="main-iframe" src="friend.html">

        </iframe>
    </div>
</div>

<script src="../../lib/jquery-3.7.0.js"></script>
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/tools.js"></script>
<script src="../../js/pages/friend/main.js"></script>

</body>
</html>